<template>
  <div class="main-area-box">
    <div class="up-area-box">
      <!-- 左侧图片区域 -->
      <div class="flex-center-t">
        <div>
          <img v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 0" class="width-360 height-360"
            :src="goodsInfo.goodsImages[0].imageUrl" alt="" />
          <div>
            <template v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 5">
              <!-- 大于5张图片时，轮播显示 -->
              <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                <el-carousel-item v-for="(item, index) in goodsInfo.goodsImages" :key="index">
                  <div class="swiper-item-img">
                    <img v-for="(subitem, subindex) in item" :key="subindex" :src="subitem.imageUrl"
                      :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" @mouseenter="mousePicEnter(item)"
                      alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
            <template v-else>
              <!-- 小于5张图片时，固定显示 -->
              <div v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 0" class="swiper-item-img">
                <img v-for="(item, index) in goodsInfo.goodsImages" :key="index" :src="item.imageUrl"
                  :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" @mouseenter="mousePicEnter(item)"
                  alt="" />
              </div>
            </template>
          </div>
        </div>
        <div class="area-right mar-l-20 mar-t-20">
          <div class="font-24 font-w">{{goodsInfo.title}} <span v-if="goodsInfo.goodsArticleNo">（货号
              {{goodsInfo.goodsArticleNo}}）</span></div>
          <div class="supply-price">
            <div class="price-box">
              <span class="mar-r-20 font-16">供货价</span>
              <span>￥{{goodsInfo.supplyPrice}}</span>
            </div>
            <div class="price-box">
              <span class="font-16">划线价</span>
              <span v-if="goodsInfo.scribingPrice">￥{{goodsInfo.scribingPrice}}</span>
            </div>
            <div class="price-box">
              <span class="font-16">供应商运费</span>
              <span>￥{{goodsInfo.supplierPostFee}}</span>
            </div>
            <div class="sock-box">
              <span>{{goodsInfo.stock}}</span>
              <span>库存</span>
            </div>
          </div>
          <div class="goods-highlights">
            <h3>商品卖点</h3>
            <span style="line-height: 30px;">
              {{goodsInfo.sellPoint}}
            </span>
          </div>
          <div class="goods-sort-box flex v-align-c" style="margin-top: 30px" v-if="goodsInfo.crossBorderType === 2">
            <div class="width-100" style="font-size: 14px;color: #606266;font-weight: 700;">跨境类型：</div>
            <div class="width-115 mar-r-20">
              {{ dict.crossBorderType[goodsInfo.crossBorderType]}}
            </div>
            <div style="font-size: 14px;color: #606266;font-weight: 700;">海关商品编码（HS)：</div>
            <span>
              {{goodsInfo.customsGoodsCode}}
            </span>
          </div>
          <div class="goods-sort-box" style="margin-top: 30px">
            <el-form>
              <el-form-item label="零售商品分类:">
                <el-cascader :disabled="!!goodsId" v-model="retailCategoryIds" :props="{ checkStrictly: true }"
                  change-on-select placeholder="选择商品分类" :options="categoryData" class="special-input" clearable
                  style="width: 80%;"></el-cascader>
              </el-form-item>
              <el-form-item label="批发商品分类:" v-if="this.enterpriseConfig.categorySeparate == 1">
                <div v-if="!this.enterpriseConfig.wholesaleCategoryAlias">
                  <!-- 批发商品分类使用别名 关闭 -->
                  <el-cascader :disabled="!!goodsId || goodsInfo.crossBorderType === 2" v-model="wholesaleCategoryIds"
                    :props="{ checkStrictly: true }" change-on-select placeholder="商品分类" :options="categoryData"
                    class="special-input" clearable style="width: 80%;"></el-cascader>
                </div>
                <div v-else>
                  <el-cascader :disabled="!!goodsId || goodsInfo.crossBorderType === 2" v-model="wholesaleCategoryIds"
                    :props="{ checkStrictly: true }" change-on-select placeholder="商品分类"
                    :options="wholesaleCategoryData" class="special-input" clearable style="width: 80%;"></el-cascader>
                </div>
              </el-form-item>
            </el-form>
            <p v-if="showError" style="color:#f00">
              <label v-if="goodsInfo.crossBorderType === 2">“零售商品分类”必须选择</label>
              <label v-else>“零售商品分类”与“批发商品分类”至少必须指定一个</label>
            </p>
          </div>
          <div class="btn-group-box mar-t-30 mar-b-30">
            <span class="self-btn-style fill-btn" v-if="auditType == 1" @click="saveGoodsInfo">同意</span>
            <span class="self-btn-style fill-btn mar-l-15" v-if="auditType == 1" @click="rejectSave">不同意</span>
            <span class="self-btn-style hollow-btn mar-l-15" @click="$router.go(-1)">返回</span>
          </div>
        </div>
      </div>
    </div>
    <div class="down-area-box" style="margin-top: 20px">
      <div style="width:70%;margin: 0 auto">
        <el-tabs type="card" v-model="tabsVal">
          <el-tab-pane label="商品详情" name="1">
            <component-details-h5 v-if="goodsInfo.detailTemplateId" :templateId="goodsInfo.detailTemplateId"
              :showMenuPanel="false"></component-details-h5>
            <div class="float-r" style="color: #FF4400;"><a @click="tabsVal='2'">更多参数>></a></div>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="2">
            <div v-if="goodsInfo.goodsParameters">
              <el-row v-for="(item, index) in goodsInfo.goodsParameters" :key="index">
                <el-col :span="5" class="align-r pad-r-10">{{item.parameterName}}：</el-col>
                <el-col :span="19">{{item.parameterValue}}</el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="海报文案" name="3">
            <div v-if="false">海报商品名称：{{goodsInfo.posterTitle}}</div>
            <div v-if="false">海报商品推荐语：{{goodsInfo.posterRecommend}}</div>
            <div>海报分享文案：{{goodsInfo.shareCopy}}</div>
            <hr />
            <el-row :gutter="20" style="height:350px">
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">单列大图</div>
                <div class="mar-t-10 bg-color-white width-300 height-300"
                  style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.picUrl" style="width:100%" :src="goodsInfo.picUrl" alt="" />
                </div>
              </el-col>
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">分享图片</div>
                <div class="mar-t-10 bg-color-white width-300 height-300"
                  style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.shareImageUrl" style="width:100%" :src="goodsInfo.shareImageUrl" alt="" />
                </div>
              </el-col>
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">海报图片</div>
                <div class="mar-t-10 bg-color-white width-300 height-300"
                  style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.posterImageUrl" style="width:100%" :src="goodsInfo.posterImageUrl" alt="" />
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="SKU明细" name="4">
            <goods-sku></goods-sku>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 拒绝通过 -->
    <el-dialog title="拒绝通过" :visible.sync="financeVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;">
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="entity.reject">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button @click="financeVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 更新修改内容 -->
    <el-dialog title="更新修改内容" :visible.sync="supplierVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;" class="align-c">
        <el-select class="select-class" v-model="updateType">
          <el-option label="更新全部" value="1"></el-option>
          <!--<el-option label="更新商品信息" value="2"></el-option>-->
          <!--<el-option label="更新商品价格" value="3"></el-option>-->
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveDate">确认更新</el-button>
        <el-button @click="supplierVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ComponentDetailsH5 from '@/components/ComponentTemplate/ComponentDetailsH5'
  import GoodsSku from './components/goods-sku'
  import {
    getSupplierGoodsDetail,
    saveAuditSupplierGoods,
    saveRefuseSupplierGoods,
    listGoodsCategory
  } from '@/api/goods/supplierGoods'
  import {
    listWholesaleGoodsCategory
  } from '@/api/goods/goods'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  export default {
    components: {
      ComponentDetailsH5,
      GoodsSku
    },
    data() {
      return {
        auditType: 1,
        updateType: '1',
        status: '1',
        financeVisible: false,
        supplierVisible: false,
        enterpriseConfig: {},
        goodsId: '',
        entity: {},
        goodsInfo: {
          skuFlag: 0,
          goodsImages: [],
          goodsParameters: [],
          crossBorderType: '1'
        },
        supplierGoodsId: '',
        listLoading: false,
        skuList: [],
        enCategoryList: [],
        enCategoryIds: [],
        dialogVisible: false,
        tabsVal: '1',
        // 零售商品类目
        retailCategoryIds: [],
        // 批发商品类目
        wholesaleCategoryIds: [],
        // 商品的所有分类json
        categoryData: [],
        // 批发商品类目
        wholesaleCategoryData: [],
        showError: false,
        dict: {
          crossBorderType: {}
        }
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      const supplierGoodsId = queryParams.supplierGoodsId
      this.status = queryParams.status
      this.goodsId = queryParams.goodsId
      this.auditType = queryParams.auditType
      if (supplierGoodsId) {
        this.supplierGoodsId = supplierGoodsId
      }
      getDictByGroupName('SupplierGoodsDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.listGoodsCategory()
      this.listWholesaleGoodsCategory()
    },
    mounted() {
      if (this.supplierGoodsId) {
        this.initGoodsInfo()
      }
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      })
    },
    methods: {
      initGoodsInfo() {
        getSupplierGoodsDetail(this.supplierGoodsId).then((response) => {
          this.goodsInfo = response.data
          this.goodsInfo.status = this.goodsInfo.auditType.toString()
          this.retailCategoryIds = []
          if (this.goodsInfo.retailCategoryIds && this.goodsInfo.retailCategoryIds.length > 0) {
            this.goodsInfo.retailCategoryIds.forEach(categoryId => this.retailCategoryIds.push(categoryId))
          }
          this.wholesaleCategoryIds = []
          if (this.goodsInfo.crossBorderType === 2) {
            this.goodsInfo.wholesaleCategoryIds = []
          }
          if (this.goodsInfo.wholesaleCategoryIds && this.goodsInfo.wholesaleCategoryIds.length > 0) {
            this.goodsInfo.wholesaleCategoryIds.forEach(categoryId => this.wholesaleCategoryIds.push(categoryId))
          }
          this.$bus.$emit('goods.edit.data', this.goodsInfo)
        })
      },
      rejectSave() {
        this.financeVisible = true
      },
      submit() {
        if (this.entity.reject == null || this.entity.reject === '') {
          this.$message.error('请填写拒绝理由')
          return
        }
        saveRefuseSupplierGoods(this.supplierGoodsId, this.entity.reject).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.financeVisible = false
          this.$router.go(-1)
        })
      },
      saveGoodsInfo() {
        // 第一次审核
        if (this.goodsId == null || this.goodsId === '') {
          this.saveDate()
        } else {
          this.supplierVisible = true
          this.updateType = '1'
        }
      },
      saveDate() {
        this.showError = false
        let goodsType = ''
        if (this.goodsInfo.crossBorderType === 2) {
          if (this.retailCategoryIds.length > 0) {
            goodsType = '30'
          }
        } else {
          if (this.retailCategoryIds.length > 0 || this.enterpriseConfig.wholesaleAuthority === 0) {
            goodsType = '30'
          }
          if (this.wholesaleCategoryIds.length > 0) {
            goodsType = '31'
          }
          if (this.retailCategoryIds.length > 0 && this.wholesaleCategoryIds.length > 0) {
            goodsType = '32'
          }
        }
        if (!goodsType) {
          this.showError = true
          return
        }
        this.listLoading = true

        this.loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        saveAuditSupplierGoods({
          supplierGoodsId: this.supplierGoodsId,
          goodsType: goodsType,
          updateType: this.updateType,
          retailCategoryIds: this.retailCategoryIds.length > 0 ? this.retailCategoryIds.join(',') : '',
          wholesaleCategoryIds: this.wholesaleCategoryIds.length > 0 ? this.wholesaleCategoryIds.join(',') : ''
        }).then((response) => {
          this.listLoading = false
          this.loading.close()
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.$router.go(-1)
        })
      },

      // 图片鼠标移入事件
      mousePicEnter(item) {
        if (item) {
          this.entity.picUrl = item.imageUrl
        }
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取批发商品类目
      listWholesaleGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listWholesaleGoodsCategory(enterpriseId).then(response => {
          this.wholesaleCategoryData = response.data
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .main-area-box {
    width: 100%;
    height: 100%;
    background: #f7f9fb;
    padding: 10px;

    .up-area-box {
      background: #fff;
      padding-top: 10px;

      .main-img-box {
        .main-img {
          img {
            width: 360px;
            height: 360px;
          }
        }
      }

      .goods-title {
        font-size: 20px;
        font-weight: 400;
        color: #323233;
        line-height: 30px;
      }

      .other-info-box {
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eeeeee;

        &>span {
          padding-left: 13px;
          padding-right: 13px;
        }

        &>span:nth-child(1),
        &>span:nth-child(2) {
          color: #666666;
        }
      }

      .goods-table-info {
        /deep/ .el-table__row {
          font-size: 14px;
          color: #323233;

          img {
            width: 40px;
            height: 40px;
          }
        }

        /deep/ .is-leaf {
          border: none;
          background: #fff;
          color: #666666;
          font-weight: 400;
          font-size: 14px;
        }
      }

      .btn-group-box {
        display: flex;

        .self-btn-style {
          width: 120px;
          padding: 10px;
          font-size: 14px;
          border-radius: 4px;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
        }

        ;

        .fill-btn:hover {
          background: rgba(255, 68, 0, 0.7);
        }

        .fill-btn {
          background: #FF4400;
          color: #fff;
        }

        .hollow-btn {
          background: #fff;
          border: 1px solid #FF4400;
          color: #FF4400;
        }
      }

      /deep/ .el-carousel__container {
        width: 360px;
        height: 64px;

        & .el-carousel__item {
          height: 64px;
        }

        .swiper-item-img {
          width: 360px;
          display: flex;
          justify-content: flex-start;

          img {
            width: 64px;
            height: 64px;
            margin-left: 10px;
          }

          &>img:nth-child(1) {
            margin-left: 0;
          }
        }
      }

      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }

        &>img:nth-child(1) {
          margin-left: 0;
        }
      }
    }

    .down-area-box {
      background: #fff;
      padding-bottom: 50px;

      /deep/ .el-tabs--card {
        .el-tabs__header {
          border: none;

          .el-tabs__item {
            border-left: none;
          }
        }
      }

      /deep/ .el-tabs__nav-scroll {
        margin-left: 30%;

        .el-tabs__nav {
          border: none;

          .is-active {
            border-top: 2px solid #ff5a00;
          }
        }
      }

      .goods-recomment-area {
        width: 30%;
        margin-left: 540px;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
      }

      .goods-info-box {

        // margin-left: 540px;
        &>ul {
          list-style: none;
          width: 686px;
          margin: 0 auto;
          background: #f9f9fa;
          font-size: 14px;
          color: #333333;
          display: flex;
          padding: 13px 20px;
          flex-wrap: wrap;

          li {
            width: 33.33%;
          }
        }

        .goods-img-box {
          width: 790px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;

          img {
            width: 500px;
          }
        }
      }
    }
  }

  .flex-center-t {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .supply-price {
      padding: 0px 10px 10px;
      background: #f9f9fa;
      color: #666666;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      position: relative;

      .price-box {
        margin-top: 15px;
        width: 35%;
        display: flex;
        justify-content: space-between;

        &>span:nth-child(2) {
          color: #323233;
          font-size: 18px;
        }
      }

      .sock-box {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &>span:nth-child(1) {
          font-size: 18px;
          color: #000;
        }
      }
    }
  }

  .area-right {
    width: 650px;
    line-height: 1.4;
  }

  .mouse-selected {
    border: 2px solid #f40;
  }
</style>
